<template>
  <div class="PersonalInformation">
    <div class="header"><p>修改密码</p></div>
    <el-divider border-style="dashed" />
    <div class="bottom">
      <div>
        <p>原密码</p>
        <el-input
          v-model="passwordList.originalPassword"
          style="width: 460px; height: 40px"
          placeholder="原密码"
        />
      </div>
      <div>
        <p>新密码</p>
        <el-input
          v-model="passwordList.newPassword"
          style="width: 460px; height: 40px"
          placeholder="新密码"
        />
      </div>
      <div>
        <p>确认新密码</p>
        <el-input
          v-model="passwordList.confirm"
          style="width: 460px; height: 40px"
          placeholder="确认新密码"
        />
      </div>
    </div>
    <el-button class="button" @click="save">保存</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const passwordList = ref({
  originalPassword: '',
  newPassword: '',
  confirm: ''
})
const save = () => {
  console.log(passwordList)
}
</script>

<style scoped lang="less">
.PersonalInformation {
  .header {
    padding: 30px 30px 0 30px;
    p {
      font-size: 18px;
      font-weight: 700;
      color: #196adc;
    }
  }
  .bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    div {
      display: flex;
      width: 600px;
      margin: 8px 0;
      height: 50px;
      line-height: 50px;
      p {
        width: 100px;
        text-align: right;
        margin-right: 40px;
      }
    }
  }
  .button {
    margin: 30px 480px;
    margin-bottom: 200px;
  }
}
</style>
